import type { CheckboxProps } from "antd";
import { Checkbox, Divider, Flex } from "antd";

interface ColumnOption {
  label: string;
  value: string;
}

interface HideColumnProps {
  options: ColumnOption[];
  checkedList: string[];
  onChange: (list: string[]) => void;
}

export default function HideColumn({ options, checkedList, onChange }: HideColumnProps) {
  const checkAll = options.length === checkedList.length;
  const indeterminate = checkedList.length > 0 && checkedList.length < options.length;

  const onCheckAllChange: CheckboxProps["onChange"] = (e) => {
    onChange(e.target.checked ? options.map((opt) => opt.value) : []);
  };

  return (
    <Flex vertical gap={10}>
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        全选
      </Checkbox>
      <Divider style={{ margin: "0" }} />
      <Checkbox.Group
        className="flex flex-col gap-2"
        options={options}
        value={checkedList}
        onChange={onChange as any}
      />
    </Flex>
  );
}
